// notifications 历史通知
import { useState, useEffect } from "react";

// prop-types is a library for typechecking of props
import PropTypes from "prop-types";

// @mui material components
import Grid from "@mui/material/Grid";
import AppBar from "@mui/material/AppBar";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";

import SoftTypography from "components/SoftTypography";
import SoftPagination from "components/SoftPagination";
import SoftSelect from "components/SoftSelect";
import SoftAvatar from "components/SoftAvatar";

import SoftInput from "components/SoftInput";

// Soft UI Dashboard PRO React components
import SoftBox from "components/SoftBox";

// Soft UI Dashboard PRO React base styles
import breakpoints from "assets/theme/base/breakpoints";

// Soft UI Dashboard PRO React example components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
import DataTable from "examples/Tables/DataTable";

import { defaultItemIconBox, defaultItemIcon } from "examples/Items/DefaultItem/styles";
import Pagination from "components/Pagination";
import decor from "assets/images/team-1.jpg";

function Notifications() {
  const [tabsOrientation, setTabsOrientation] = useState("horizontal");
  const [tabValue, setTabValue] = useState(0);
  const dataTableData = {
    columns: [
      {
        Header: "Token",
        accessor: "token",
        Cell: ({ value }) => (
          <SoftBox display="flex" alignItems="center" lineHeight={1}>
            <SoftBox mr={2}>
              {/* <SoftBox component="img" src={value.img} alt={value.name} width="100%" /> */}
              {value.img ? (
                <SoftAvatar src={value.img} alt={value.name} size="sm" variant="rounded" />
              ) : null}
            </SoftBox>
            <SoftTypography display="block" variant="caption" fontWeight="medium">
              {value.name}
            </SoftTypography>
          </SoftBox>
        ),
      },
      { Header: "Signal Price", accessor: "signalPrice" },
      { Header: "Action", accessor: "action" },
      { Header: "Signal Interval", accessor: "signalInterval" },
      {
        Header: "Signal Time",
        accessor: "signalTime",
      },
    ],
    rows: [
      {
        token: { img: decor, name: "Bitcoin", test: "BTC" },
        signalPrice: "$10",
        action: "Visa",
        signalInterval: "12/04/2020",
        signalTime: "Delivered",
      },
    ],
  };
  useEffect(() => {
    // A function that sets the orientation state of the tabs.
    function handleTabsOrientation() {
      return window.innerWidth < breakpoints.values.sm
        ? setTabsOrientation("vertical")
        : setTabsOrientation("horizontal");
    }

    /**
     The event listener that's calling the handleTabsOrientation function when resizing the window.
    */
    window.addEventListener("resize", handleTabsOrientation);

    // Call the handleTabsOrientation function to set the state with the initial value.
    handleTabsOrientation();

    // Remove event listener on cleanup
    return () => window.removeEventListener("resize", handleTabsOrientation);
  }, [tabsOrientation]);

  const handleSetTabValue = (event, newValue) => {
    setTabValue(newValue);
  };
  const [totalPages, setTotalPages] = useState(7);
  const [currentPage, setCurrentPage] = useState(1);
  const onPageChange = (page) => {
    console.log(page);
    if (page < 1 || page > totalPages) return;
    setCurrentPage(page);
  };
  return (
    <DashboardLayout>
      <DashboardNavbar />
      <SoftBox mt="60px">
        <Grid container>
          <Grid item>
            <AppBar position="static">
              <Tabs orientation={tabsOrientation} value={tabValue} onChange={handleSetTabValue}>
                <Tab label="Notifications" sx={{ px: "20px", py: "10px" }} />
                <Tab label="Recent Signals" sx={{ px: "20px", py: "10px" }} />
              </Tabs>
            </AppBar>
          </Grid>
        </Grid>
      </SoftBox>
      {tabValue === 0 && (
        <Card sx={{ mt: "36px", p: 3 }}>
          <SoftBox pb={3} lineHeight={1}>
            <SoftTypography variant="h5" fontWeight="medium">
              Notification History
            </SoftTypography>
          </SoftBox>
          <SoftBox>
            <SoftBox display="flex" alignItems="center">
              <SoftBox sx={(theme) => defaultItemIconBox(theme, {})}>
                <Icon fontSize="default" sx={(theme) => defaultItemIcon(theme, {})}>
                  notifications
                </Icon>
              </SoftBox>
              <SoftBox ml={2} lineHeight={1}>
                <SoftTypography display="block" variant="button" fontWeight="medium">
                  ENS has sent a new signal, go check it out now.
                </SoftTypography>
                <SoftTypography variant="button" fontWeight="regular" color="text">
                  Today 11:01
                </SoftTypography>
              </SoftBox>
            </SoftBox>
            <SoftBox mt="30px">
              <SoftBox display="flex" alignItems="center">
                <SoftBox sx={(theme) => defaultItemIconBox(theme, {})}>
                  <Icon fontSize="default" sx={(theme) => defaultItemIcon(theme, {})}>
                    notifications
                  </Icon>
                </SoftBox>
                <SoftBox ml={2} lineHeight={1}>
                  <SoftTypography display="block" variant="button" fontWeight="medium">
                    ENS has sent a new signal, go check it out now.
                  </SoftTypography>
                  <SoftTypography variant="button" fontWeight="regular" color="text">
                    Today 11:01
                  </SoftTypography>
                </SoftBox>
              </SoftBox>
            </SoftBox>
          </SoftBox>
          <Pagination
            totalPages={totalPages}
            currentPage={currentPage}
            onPageChange={onPageChange}
          />
        </Card>
      )}
      {tabValue === 1 && (
        <Card sx={{ mt: "36px", p: 3 }}>
          <SoftBox pb={3} lineHeight={1} display="flex" alignItems="center">
            <SoftTypography variant="h5" fontWeight="medium">
              Recent Notifications
            </SoftTypography>
            <SoftBox ml="auto" display="flex" alignItems="center">
              <SoftBox mr={6}>
                <SoftSelect
                  placeholder="Signal Interval"
                  isClearable
                  options={[
                    { value: "1", label: "Tron (TRC20)" },
                    { value: "2", label: "Solana (SOL)" },
                  ]}
                />
              </SoftBox>
              <SoftBox>
                <SoftSelect
                  placeholder="Select Crypto"
                  isClearable
                  options={[
                    { value: "1", label: "Tron (TRC20)" },
                    { value: "2", label: "Solana (SOL)" },
                  ]}
                />
              </SoftBox>
            </SoftBox>
          </SoftBox>
          <SoftBox>
            <DataTable table={dataTableData} entriesPerPage={false} />
          </SoftBox>
          <Pagination
            totalPages={totalPages}
            currentPage={currentPage}
            onPageChange={onPageChange}
          />
        </Card>
      )}
    </DashboardLayout>
  );
}
Notifications.propTypes = {
  value: PropTypes.any, // 或者根据实际情况修改验证规则
};

export default Notifications;
